App.require(function () {
    var app = App.getCurrent();

    app.definePage("strpcdataPickerActive", {
        getDomObj: function () {
            this.attachDom(".pc-month-container", "monthContainer")
                .attachDom(".select-month-container", "selectContainer")
                .attachEvent("monthContainer", "click", this.selectDayHandler, false)
                .attachEvent("selectContainer", "animationend", this.animationEndHandler, false)
        },
        selectDayHandler: function (ev) {
            var target = ev.target;
            if (target.classList.contains("li-item") && target.nodeName.toUpperCase() === "LI") {
                if (target.classList.contains("str-disabled-date-item")) return;
                this.data.selectDate.day = parseInt(target.textContent);
                this.attachDate();
                var selectDay = this.domList.monthContainer.querySelector(".selected");
                if (selectDay) selectDay.classList.remove("selected");
                ev.target.classList.add("selected");
            }
        },
        attachDate: function () {
            var data = this.data, yDate = data.yDate, selectDate = data.selectDate;
            yDate.year = selectDate.year;
            yDate.month = selectDate.month;
            yDate.day = selectDate.day;
        },
        animationEndHandler: function (ev) {
            if (ev.target !== this.domList.selectContainer) return;
            var monthContainer = this.domList.monthContainer;
            monthContainer.className = "pc-month-container";
            var currentDom = this.currentDom, backDom = this.backDom;
            this.replaceDom(currentDom.classList, true);
            this.replaceDom(backDom.classList);
            this.currentDom = backDom;
            this.backDom = currentDom;
            this.backDom.innerHTML = "";
        },
        replaceDom: function (classList, isCurrent) {
            if (isCurrent) {
                classList.remove("current-container");
                classList.add("back-container");
            }
            else {
                classList.remove("back-container");
                classList.add("current-container");
            }
        },
        previous: function () {
            var data = this.data, yDate = data.yDate, selectDate = data.selectDate;
            var year = yDate.year, month = yDate.month, day = yDate.day, staticPage = this.parent.staticPage;
            yDate.set(selectDate.year, selectDate.month, selectDate.day);
            yDate.previousMonth();
            staticPage.setHeadStr(yDate.toYearMonth());
            staticPage.computePrevNextStyle(yDate.year, yDate.month);
            selectDate.day = yDate.day;
            selectDate.month = yDate.month;
            selectDate.year = yDate.year;
            this.backDom.innerHTML = this.computeHtml(yDate.getMonthDays(), year, month, day);
            this.domList.monthContainer.classList.add("date-turn-right");
            yDate.set(year, month, day);
            return true;
        },
        next: function () {
            var data = this.data, yDate = data.yDate, selectDate = data.selectDate;
            var year = yDate.year, month = yDate.month, day = yDate.day, staticPage = this.parent.staticPage;
            yDate.set(selectDate.year, selectDate.month, selectDate.day);
            yDate.nextMonth();
            staticPage.setHeadStr(yDate.toYearMonth());
            staticPage.computePrevNextStyle(yDate.year, yDate.month);
            selectDate.day = yDate.day;
            selectDate.month = yDate.month;
            selectDate.year = yDate.year;
            this.backDom.innerHTML = this.computeHtml(yDate.getMonthDays(), year, month, day);
            this.domList.monthContainer.classList.add("date-turn-left");
            yDate.set(year, month, day);
            
            return true;
        },
        computeHtml: function (obj, year, month, day) {
            var tempHtml = "", now = new Date(),
                yDate = this.data.yDate, 
                data = this.data.selectDate,
                year = year || data.year, month = month || data.month, day = day || data.day,
                tYear = now.getFullYear(), tMonth = now.getMonth() + 1, tDay = now.getDate();
            for (var i = 0; i < obj.prevNum; i++) {
                tempHtml += "<li></li>";
            }
            for (var i = 0; i < obj.num; i++) {
                var isDisabledClassStr = this._isInSelectDay(data.year, data.month, i + 1);
                if (year == yDate.year && month == yDate.month && day - 1== i) {
                    tempHtml += '<li class="li-item' + isDisabledClassStr + ' selected">' + (i + 1) + '</li>';
                }
                else if (tYear == yDate.year && tMonth == yDate.month && tDay - 1== i) {
                    tempHtml += '<li class="li-item' + isDisabledClassStr + ' current">' + (i + 1) + '</li>';
                }
                else {
                    tempHtml += '<li class="li-item' + isDisabledClassStr + '">' + (i + 1) + '</li>';
                }
                
            }
            return tempHtml;
        },
        _isInSelectDay: function (year, month, day) {
            var minDate = this.data.minDate, maxDate = this.data.maxDate;
            if (!this.data.minDate && !this.data.maxDate) return "";
            if (!minDate) {
                if (maxDate.compare(year, month, day) > -1) return "";
                return " str-disabled-date-item";
            }
            if (!maxDate) {
                if (minDate.compare(year, month, day) < 1) return "";
                return " str-disabled-date-item";
            }

            if (maxDate.compare(year, month, day) > -1 && minDate.compare(year, month, day) < 1) return "";
            return " str-disabled-date-item";
        },
        init: function () {
            var monthContainer = this.domList.monthContainer, yDate = this.data.yDate;
            this.currentDom = monthContainer.querySelector(".current-container");
            this.backDom = monthContainer.querySelector(".back-container");
            this.parent.staticPage.computePrevNextStyle(yDate.year, yDate.month);
        },
        render: function (next) {
            var data = this.data, parentDate = this.parent.data, 
                yDate = parentDate.yDate, minDate = parentDate.minDate, maxDate = parentDate.maxDate;
            data.selectDate = parentDate.selectDate;
            data.yDate = yDate;
            data.minDate = minDate;
            data.maxDate = maxDate;
            this.data.html = this.computeHtml(data.yDate.getMonthDays());
            this.fetch("./index.html", function (html) {
                next(this.renderHTML(html));
            })
        }
    })
})